<template>
  <div id="main-content">
    <div class="content">
      <el-header>
        <div class="title">楼盘列表</div>
      </el-header>
      <div class="selectBar">
        <el-form ref="form" :model="hourseBaseInfoQuery" label-width="80px" :inline="true">
          <el-form-item label="名称">
            <el-input v-model="hourseBaseInfoQuery.name"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="hourseBaseInfoQuery.cityName" placeholder="请选择" clearable>
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域">
            <el-input v-model="hourseBaseInfoQuery.areaAllName" :disabled="areaAllNameDisabled"></el-input>
          </el-form-item>
          <el-form-item label="楼盘地址">
            <el-input v-model="hourseBaseInfoQuery.address"></el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-button @click="search('BY_SELECT_BTN')" size="small" type="primary" icon="el-icon-search">查询</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table-content" v-loading="loading">
        <el-table :data="hourseList" border style="width: 100%">
          <el-table-column label="楼盘名称">
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetailPage(scope.row.hourseId)">{{scope.row.name}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="cityName" label="所在城市" width="180"></el-table-column>
          <el-table-column prop="areaAllName" label="区域" width="180"></el-table-column>
          <el-table-column prop="address" label="楼盘地址" width="180"></el-table-column>
          <el-table-column prop="developCompany" label="开发商"></el-table-column>
          <el-table-column prop="propertyTypeName" label="物业类型"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteHourse(scope.row.hourseId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { cities, propertyTypeOptions } from "@/constants/constants.js";
export default {
  data() {
    return {
      hourseBaseInfoQuery: {
        name: "",
        cityName: "",
        areaAllName:"",
        address:"",
        developCompany:"",
        tagNames: ""
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      hourseList: [],
      propertyTypeOptions: propertyTypeOptions,
      cities: cities
    };
  },
  computed: {
      areaAllNameDisabled: function () {
          return !this.hourseBaseInfoQuery.cityName;
      }
  },
  methods: {
    search(source) {
      if(source == 'BY_SELECT_BTN'){
        this.hourseBaseInfoQuery.pageNo = 1;
      }else{
        this.hourseBaseInfoQuery.pageNo = this.pageNo;
      }
      this.loading = true;
      this.hourseBaseInfoQuery.pageSize = this.pageSize;
      this.$http
        .post("/api/hourseBaseInfo/query/page", this.hourseBaseInfoQuery)
        .then(response => {
          if (response) {
            this.hourseList = response.data.content;
            this.total = response.data.totalElements;
          }
          this.loading = false;
        });
    },
    handleCurrentChange() {
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
    toDetailPage(hourseId) {
      this.$router.push("/hourseBaseInfo/" + hourseId);
    },
    resetForm(){
      this.hourseBaseInfoQuery = {
        name: "",
        cityName: "",
        tagNames: ""
      }
    },
    deleteHourse(hourseId){
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (hourseId) {
          this.doDeletedeleteHourse(hourseId);
        }
      });
    },
    doDeletedeleteHourse(hourseId){
      this.$http.post("/api/hourseInfo/delete/" + hourseId).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.search();
      });
    }
  },
  created() {
    this.search();
  }
};
</script>
<style>
#main-content {
  width: 90%;
  margin: 0 auto;
}
.title {
  font-size: 18px;
  color: #303133;
}
.content {
  width: 100%;
  min-height: 1000px;
  padding: 15px;
}
.pagination {
  margin: 0 auto;
  margin-top: 10px;
  width: 1000px;
}
.table-content{
  margin-top: 15px;
}
</style>